<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/1px.css" />
		<link href="../css/mui.picker.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/mui.poppicker.css" />
		<link rel="stylesheet" href="../css/mui.dtpicker.css" />
	</head>
	<style>
		html {
			font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
		}
		
		body {
			overflow-x: hidden;
			background-color: #fff !important;
		}
		
		.mui-content {
			background-color: #fff;
		}
		
		.flex {
			display: flex;
		}
		/**/
		
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
			color: #ff6600;
			border-bottom: 2px solid #ff6600;
			background-color: #F9F9F9;
		}
		
		.mui-control-item {
			background-color: #F9F9F9;
		}
		/**/
		
		.mui-scroll-wrapper {
			top: 70px;
		}
		/**/
		
		.select-all {
			margin-top: 10px;
			text-indent: 5px;
		}
		
		.select {
			width: 80%;
			margin-left: 5%;
			border: 1px solid #C0C0C0;
			border-radius: 3px;
			line-height: 24px;
			font-size: 14px;
			color: #ACACB4;
			position: relative;
		}
		
		.start-time,
		.end-time {
			border: 1px solid #C0C0C0;
			border-radius: 3px;
			line-height: 24px;
			font-size: 14px;
			color: #ACACB4;
			position: relative;
			width: 40%;
		}
		
		.start-time {
			margin-left: 5%;
		}
		
		.select-time {
			flex: 5;
		}
		
		.selsect-satus {
			flex: 2;
		}
		
		.mui-icon-arrowdown {
			font-size: 14px;
			position: absolute;
			right: 5px;
			top: 5px;
		}
		/**/
		
		.list-content {
			padding-bottom: 10px;
		}
		
		.list-content:after {
			height: 0;
			content: '';
			clear: both;
			display: block;
		}
		
		.apply-bill {
			float: left;
			width: 48%;
			margin-top: 10px;
			margin-left: 1.3%;
			height: 100px;
			font-size: 13px;
			line-height: 22px;
			background-color: #fff;
			padding: 4px 0;
		}
		
		.bill-box {
			text-indent: 5px;
			width: 92%;
			margin-left: 4%;
			position: relative;
			border: 1px dashed #ccc;
			border-radius: 5px;
		}
		
		.edit-icon {
			position: absolute;
			bottom: 2px;
			right: 2px;
		}
		/*加载*/
		
		.mui-pull-bottom-pocket {
			visibility: visible;
		}
		
		.mui-pull-bottom-pocket .mui-pull-loading {
			visibility: visible;
		}
		/*无*/
		
		.no {
			text-align: center;
			line-height: 30px;
		}
	</style>

	<body>
		<!--主体-->
		<div class="mui-content">
			<div class="flex select-all">
				<div class="select-time">
					<div class="flex">
						<div class="start-time">
							<!--2017-12-1-->
						</div>
						<span style="display: inline-flex;font-size:13px;margin-right: 2%;">至</span>
						<div class="end-time">
							<!--2017-12-22-->
						</div>
					</div>

				</div>
				<!--<div class="selsect-satus">
          <div class="select">
            全部
            <span class="mui-icon mui-icon-arrowdown"></span>
          </div>
        </div>-->
			</div>
			<div id='segmentedControl' class='mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary'>
				<a class='mui-control-item mui-active' index='0'>待提交</a>
				<a class='mui-control-item' index='1'>执行中</a>
				<a class='mui-control-item' index='2'>已完结</a>
			</div>
			<div id="refreshContainer" class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="list-content">

					</div>
					<!--加载中-->
					<div class="mui-pull-bottom-pocket">
						<div class="mui-pull">
						</div>
					</div>
					<!--加载中-->
				</div>
			</div>
			<script id="applyList" type="text/html">
				<%if(list.applyList.length > 0){%>
				<% for(var i=0;i<list.applyList.length;i++){ %>
				<div class="apply-bill" data-id=" <%=list.applyList[i].applyId %>" data-status="<%=list.applyList[i].applyStatus%>">
					<div class="bill-box box-shadow-1px">
						<div class="apply-id">
							<%=list.applyList[i].applyId %>
						</div>
						<div class="goods-num">货品数量：
							<%=list.applyList[i].goodsAmount%>
						</div>
						<div class="goods-style">货品款式：
							<%=list.applyList[i].goodsStyle%>
						</div>
						<div class="apply-status">状态：
							<%=list.applyStatusKeyValue[list.applyList[i].applyStatus] %>
						</div>
						<%if(list.applyList[i].applyStatus ===1){%>
						<img class="edit-icon" src="../images/edit.png" alt="" />
						<%}%>
					</div>
				</div>
				<%}%>
				<%} else {%>
				<p class="no">暂无数据</p>
				<%}%>
			</script>
		</div>
		<!---->
		<script src="../config.js"></script>
		<script src="../js/template-native.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.poppicker.js"></script>
		<script type="text/javascript" src="../js/mui.dtpicker.js"></script>
		<script type="text/javascript">
			(function($) {
				$.init({
					beforeback: function() {
						if(type === 1) {
							return true
						} else if(type === 2) {
							var allPage = plus.webview.all()
							var nowPage = plus.webview.getWebviewById('index')
							for(var i = 0; i < allPage.length; i++) {
								if(allPage[i].getURL() !== nowPage.getURL()) {
									plus.webview.close(allPage[i]);
								}
							}
						}
					}
				})
				//          	监听
				$.plusReady(function() {
					receiveParams()
					getApply()
				})
				$.ready(function() {
					setPicker()
					bindEvent()
				})
				window.addEventListener('changeList', function(e) {
					pageNo = 1
					applyList = []
					var fromTime = new Date().format('yyyy-MM') + '-01'
					toTime = new Date().format('yyyy-MM-dd')
					document.querySelector(".start-time").innerText = fromTime
					document.querySelector(".end-time").innerText = toTime
					mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 100)
					getApply()
				})
				//滚动
				$('.mui-scroll-wrapper').scroll({
					scrollY: true,
					bounce: true,
					deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
				});
				var fromTime = new Date().format('yyyy-MM') + '-01',
					toTime = new Date().format('yyyy-MM-dd'),
					phoneCheckState = [1],
					storeId = '',
					pageNo = 1,
					pageCount = 10,
					applyList = [],
					applyStatusKeyValue = [],
					isLoading = false,
					pageTatol = 0,
					type = 1
				document.querySelector(".start-time").innerText = fromTime
				document.querySelector(".end-time").innerText = toTime
				//设置加载状态
				function setLoading(type) {
					switch(type) {
						case 1:
							document.querySelector(".mui-pull").innerHTML = '<div class="mui-pull-loading mui-icon mui-spinner"></div>\
						<div class="mui-pull-caption">正在加载</div>'
							break
						case 2:
							document.querySelector(".mui-pull").innerHTML = '<div class="mui-pull-caption">没有更多</div>'
							break
						case 0:
							document.querySelector(".mui-pull").innerHTML = ''
							break
					}

				}

				function setPicker() {
					//起始时间
					var options = {
						'type': 'date'
					}
					var startTimePicker = new $.DtPicker(options)
					var startTime = document.querySelector(".start-time")
					startTime.addEventListener('tap', function() {
						startTimePicker.show(function(item) {
							startTime.innerText = item.text
							fromTime = item.text
							pageNo = 1
							applyList = []
							mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 100)
							getApply()
						})
					})
					//结束时间
					var endTimePicker = new $.DtPicker({
						'type': 'date'
					})
					var endTime = document.querySelector(".end-time")
					endTime.addEventListener('tap', function() {
						endTimePicker.show(function(item) {
							endTime.innerText = item.text
							toTime = item.text
							pageNo = 1
							applyList = []
							mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 100)
							getApply()
						})
					})
				}
				//接收数据
				function receiveParams() {
					var self = plus.webview.currentWebview();
					currentShopObj = self.currentShopObj;
					storeId = self.currentShopObj.storeId,
						type = self.type
				}
				// 绑定事件
				function bindEvent() {
					//滚动监听
					document.querySelector('.mui-scroll-wrapper').addEventListener('scrollend', function(e) {
						if(e.detail.y <= e.detail.maxScrollY) {
							if(isLoading === false) {
								if(++pageNo <= pageTatol) {
									getApply()
								} else {
									setLoading(2)
								}
							}
						}
					});
					mui('.mui-segmented-control').on('tap', '.mui-control-item', function() {
						var index = this.getAttribute('index') * 1
						if(index === 0) {
							phoneCheckState = [1]
						} else if(index === 1) {
							phoneCheckState = [2, 3, 4, 5, 6]
						} else {
							phoneCheckState = [7]
						}
						pageNo = 1
						getApply()
					})
					$('.list-content').on('tap', '.apply-bill', function() {
						var elApplyId = this.getAttribute('data-id')
						var status = this.getAttribute('data-status') - 0
						//获取点击单数据
						config.ajax({
							type: 'post',
							url: config.basePath + '/apply/checkapplybyapplyid.do',
							headers: {
								'Content-Type': 'application/json'
							},
							data: {
								applyId: elApplyId
							},
							success: function(res) {
								if(res.result === 1) {
									var applyGoodsList = res.applyVo.goods
									var titleText = currentShopObj.storeName + '-进货'
									if(status === 1) {
										$.openWindow({
											url: 'purchase2.html',
											id: 'purchase2',
											styles: {
												top: 0, //新页面顶部位置
												bottom: 0, //新页面底部位置
												titleNView: {
													titleText: titleText,
													titleColor: "#FFFFFF",
													titleSize: "17px",
													backgroundColor: "#FF6800",
													autoBackButton: true,
													buttons: [{
														float: "right",
														fontSize: "18px",
														fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
														text: "\ue602",
														onclick: function() {
															var allPage = plus.webview.all()
															var nowPage = plus.webview.getWebviewById('index')
															for(var i = 0; i < allPage.length; i++) {
																if(allPage[i].getURL() !== nowPage.getURL()) {
																	plus.webview.close(allPage[i]);
																}
															}
														}
													}],
													splitLine: {
														color: "#CCCCCC",
														height: "1px"
													}
												}
											},
											extras: {
												currentShopObj: currentShopObj,
												applyGoodsList: applyGoodsList,
												applyId: elApplyId,

											},
										})
									} else {
										$.openWindow({
											url: 'purchaseDetail.html',
											id: 'purchaseDetail',
											styles: {
												top: 0, //新页面顶部位置
												bottom: 0, //新页面底部位置
												titleNView: {
													titleText: titleText,
													titleColor: "#FFFFFF",
													titleSize: "17px",
													backgroundColor: "#FF6800",
													autoBackButton: true,
													buttons: [{
														float: "right",
														fontSize: "18px",
														fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
														text: "\ue602",
														onclick: function() {
															var allPage = plus.webview.all()
															var nowPage = plus.webview.getWebviewById('index')
															for(var i = 0; i < allPage.length; i++) {
																if(allPage[i].getURL() !== nowPage.getURL()) {
																	plus.webview.close(allPage[i]);
																}
															}
														}
													}],
													splitLine: {
														color: "#CCCCCC",
														height: "1px"
													}
												}
											},
											extras: {
												currentShopObj: currentShopObj,
												applyGoodsList: applyGoodsList,
												applyId: elApplyId,
												applyStatusKeyValue: applyStatusKeyValue[status],
												linkMan: res.applyVo.apply.linkMan
											},
										})
									}
								} else {
									mui.toast(res.errormsg)
								}
							}
						})

					})
				}
				//获取数据
				function getApply() {
					isLading = true
					setLoading(1)
					if(fromTime && toTime) {
						if(new Date(fromTime).getTime() > new Date(toTime).getTime()) {
							var startTime = toTime
							var endTime = fromTime
						} else {
							var startTime = fromTime
							var endTime = toTime
						}
					}
					$.ajax({
						type: "post",
						url: config.basePath + "/apply/mobileCheckApply",
						async: true,
						headers: {
							'Content-Type': 'application/json'
						},
						data: {
							fromTime: new Date(startTime + ' 00:00:00').getTime(),
							toTime: new Date(endTime + ' 23:59:59').getTime(),
							phoneCheckState: phoneCheckState,
							storeId: storeId,
							pageNo: pageNo
						},
						success: function(res) {
							if(res.result === 1) {
								if(pageNo === 1) {
									applyList = res.applys.data
								} else {
									for(var i = 0; i < res.applys.data.length; i++) {
										applyList.push(res.applys.data[i])
									}
								}
								pageTatol = res.applys.pageTatol
								applyStatusKeyValue = res.applyStatusKeyValue
								setPage()
								isLading = false
								setLoading(0)
							} else {
								if(pageNo === 1) {
									var html = template('applyList', {
										list: {
											applyList: [],
											applyStatusKeyValue: []
										},
									})
									$('.list-content')[0].innerHTML = html
								}
								isLading = false
								setLoading(0)
							}
						}
					});
				}

				function setPage() {
					var html = template('applyList', {
						list: {
							applyList: applyList,
							applyStatusKeyValue: applyStatusKeyValue
						},
					})
					$('.list-content')[0].innerHTML = html
				}
			})(mui)
		</script>
	</body>

</html>